<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
      tooltip-effect="dark"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        label="序号"
      >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column
        prop="variable"
        label="变量名称"
      />
      <el-table-column
        prop="time"
        label="实时事件"
        show-overflow-tooltip
      />
      <el-table-column
        prop="timeValue"
        label="实时值"
        show-overflow-tooltip
      />
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        :current-page="1"
        :page-size="pagesize"
        :total="tableData.length"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '01',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '02',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '03',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '04',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '05',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '06',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '07',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '08',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '09',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '10',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '10',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '11',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '12',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '13',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '14',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }, {
        date: '15',
        variable: '4543断路器位置',
        timeValue: '1.00',
        time: '10:46:30'
      }],
      multipleSelection: [],

      /* 分页数据*/
      pageTotal: 0,
      currentPage: 1, // 默认第一页
      pagesize: 9 // 当前显示页数
    }
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 分页点击方法
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
    }
  }
}
</script>
<style scoped>
.page-pagination{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
</style>
